<template>
    <div class="setting">
        <a-page-header title="设置" @back="$router.back()">
            <template #subtitle>
                <a-radio-group type="button" v-model="activeKey">
                    <a-radio value="1">可同步设置</a-radio>
                    <a-radio value="2">本地设置</a-radio>
                </a-radio-group>
            </template>
            <template #extra>
                <a-button type="primary" status="success" @click="save">保存</a-button>
            </template>
        </a-page-header>
        <div class="setting-wrapper">
            <a-form :model="setting" layout="vertical" v-show="activeKey === '1'">
                <a-form-item label="最大同时下载数">
                    <a-input-number :min="1" v-model="setting.maxDownloadCount"></a-input-number>
                </a-form-item>
                <a-form-item label="文本拓展名">
                    <a-tag v-for="index in setting.textExtra" :key="index" closable color="blue" style="margin-right: 7px;"
                        :disable-transitions="false" @close="removeTextExtra(index)" class="home-exclude-index">
                        {{ index }}
                    </a-tag>
                    <a-input v-if="addTextExtra.input" ref="homeExcludeIndexInput" v-model="addTextExtra.value" size="small"
                        @keyup.enter="addTextExtraClick" @blur="addTextExtraClick" style="width: 72px;"
                        class="home-exclude-item" />
                    <a-button type="primary" v-else size="small" @click="clickTextExtra" class="home-exclude-item">
                        新增文本拓展名
                    </a-button>
                </a-form-item>
                <a-form-item label="图片拓展名">
                    <a-tag v-for="index in setting.imageExtra" :key="index" closable color="blue" style="margin-right: 7px;"
                        :disable-transitions="false" @close="removeImageExtra(index)" class="home-exclude-index">
                        {{ index }}
                    </a-tag>
                    <a-input v-if="addImageExtra.input" ref="homeExcludeIndexInput" v-model="addImageExtra.value"
                        size="small" @keyup.enter="addImageExtraClick" @blur="addImageExtraClick" style="width: 72px;"
                        class="home-exclude-item" />
                    <a-button type="primary" v-else size="small" @click="clickImageExtra" class="home-exclude-item">
                        新增图片拓展名
                    </a-button>
                </a-form-item>
                <a-form-item label="视频拓展名">
                    <a-tag v-for="index in setting.videoExtra" :key="index" color="blue" style="margin-right: 7px;"
                        :disable-transitions="false" class="home-exclude-index">
                        {{ index }}
                    </a-tag>
                </a-form-item>
            </a-form>
            <a-form :model="localSetting" layout="vertical" v-show="activeKey === '2'">
                <a-form-item label="默认下载路径">
                    <a-input v-model="localSetting.downloadPath">
                        <template #append>
                            <a-button type="text" @click="choose">
                                <template #icon>
                                    <icon-folder />
                                </template>
                            </a-button>
                        </template>
                    </a-input>
                </a-form-item>
                <a-form-item label="布局方式">
                    <a-select v-model="localSetting.layout">
                        <a-option :value="SettingLayoutEnum.INFO">详细列表</a-option>
                        <a-option :value="SettingLayoutEnum.TABLE">表格布局</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="排序方式">
                    <a-select v-model="localSetting.order">
                        <a-option :value="SettingOrderEnum.DEFAULT">默认排序</a-option>
                        <a-option :value="SettingOrderEnum.NAME_ASC">名字正序</a-option>
                        <a-option :value="SettingOrderEnum.NAME_DESC">名字倒序</a-option>
                        <a-option :value="SettingOrderEnum.UPDATE_TIME_ASC">更新时间正序</a-option>
                        <a-option :value="SettingOrderEnum.UPDATE_TIME_DESC">更新时间倒序</a-option>
                        <a-option :value="SettingOrderEnum.TYPE">类型</a-option>
                    </a-select>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Setting from "../entity/Setting";
import { settingService } from "@/global/BeanFactory";
import { toRaw } from "vue";
import MessageUtil from "@/utils/MessageUtil";
import { useLocalSettingStore } from "../store/LocalSettingStore";
import SettingLayoutEnum from "../enumeration/SettingLayoutEnum";
import SettingOrderEnum from "../enumeration/SettingOrderEnum";

export default defineComponent({
    name: 'setting',
    data: () => ({
        SettingLayoutEnum,
        SettingOrderEnum,
        activeKey: '1',
        setting: {
            maxDownloadCount: 1,
            textExtra: [],
            imageExtra: [],
            videoExtra: []
        } as Setting,
        localSetting: {
            downloadPath: '',
            layout: SettingLayoutEnum.INFO,
            order: SettingOrderEnum.UPDATE_TIME_ASC
        },
        addTextExtra: {
            input: false,
            value: ''
        },
        addImageExtra: {
            input: false,
            value: ''
        },
    }),
    created() {
        this.setting = settingService.info();
        this.localSetting = useLocalSettingStore().instance
    },
    methods: {
        save() {
            settingService.save(toRaw(this.setting));
            useLocalSettingStore().save(this.localSetting);
            MessageUtil.success("保存成功")
        },
        choose() {
            let folders = utools.showOpenDialog({
                title: "选择下载保存位置",
                defaultPath: this.localSetting.downloadPath,
                properties: ['openDirectory']
            });
            if (folders && folders.length > 0) {
                this.localSetting.downloadPath = folders[0]
            }
        },
        // 文本
        removeTextExtra(name: string) {
            this.setting.textExtra.splice(this.setting.textExtra.indexOf(name), 1);
        },
        addTextExtraClick() {
            if (this.addTextExtra.value !== '') {
                this.setting.textExtra.push(this.addTextExtra.value);
            }
            this.addTextExtra.value = '';
            this.addTextExtra.input = false;
        },
        clickTextExtra() {
            this.addTextExtra.input = true;
            this.addTextExtra.value = '';
        },
        // 图片
        removeImageExtra(name: string) {
            this.setting.imageExtra.splice(this.setting.imageExtra.indexOf(name), 1);
        },
        addImageExtraClick() {
            if (this.setting.imageExtra.indexOf(this.addImageExtra.value) === -1) {
                this.setting.imageExtra.push(this.addImageExtra.value);
            }
            this.addTextExtra.value = '';
            this.addImageExtra.input = false;
        },
        clickImageExtra() {
            this.addImageExtra.input = true;
            this.addImageExtra.value = '';
        }
    }
});
</script>
<style lang="less">
.setting {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .setting-wrapper {
        position: absolute;
        top: 62px;
        left: 14px;
        right: 14px;
        bottom: 14px;

        .arco-input-wrapper {
            width: 320px;
        }
        .arco-select{
            width: 320px;
        }
    }
}
</style>